<template>
    <div class="banner-container" v-if="isShow">
        <img :src="banner" class="banner-img">
        <div class="banner-content">
           <img src="@/assets/agent/Welcome.svg">
        </div>
        <img src="@/assets/icon_banner_close.svg" class="btn_close" alt=""  @click="close"/>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import bannerImg from '@/assets/agent/banner.png'
const banner = ref(bannerImg)
const isShow = ref(true)

function close () {
  isShow.value = false;
  document.querySelector('.home-list-container')?.classList.remove('home-list-container-open')
}

</script>

<style lang="scss" scoped>
    .banner-container{
        position: relative;
        margin-bottom: 30px;
        .banner-img{
            width: 100%;
            border-radius: 12px;
        }
        .btn_close{
            width: 16px;
            cursor: pointer;
            top:8px;
            right: 8px;
            position: absolute;
        }
        .banner-content{
            position: absolute;
            top: 35px;
            left: 50px;
        }
    }
</style>
